<script setup>
import {computed, inject, reactive, ref} from "vue";
import {FOUR_CORNER_SETTING, DONT_SHOW_ATTR} from "@/types/viewSetting";
import {FOUR_CORNER, FOUR_CORNER_SHOW_NAME, Map_Show_Name} from "@/types/types";

const props = defineProps(['fourCornerVal'])

const fourCornerInfoAttrs = reactive(getCornerSetting())

function getCornerSetting() {
  let info = {}
  Object.entries(FOUR_CORNER_SETTING).forEach(([position, attrs]) => {
    attrs.forEach(attr => {
      if (info[position]) {
        info[position][attr] = ''
      } else {
        info[position] = {}
        info[position][attr] = ''
      }
    })
  })
  return info
}

const initFinish = computed(() => props.fourCornerVal && props.fourCornerVal[FOUR_CORNER_SHOW_NAME.TOTAL] >= 0)

</script>

<template>
  <div ref="renderCornerInfoRef"
       v-show="initFinish"
       class="w-full h-full grid grid-cols-3 grid-rows-3 absolute left-0 top-0 z-10 text-white select-none p-[10px]">
    <div v-for="(attrs, position) in fourCornerInfoAttrs" :key="position" :class="position">
      <template v-if="position === FOUR_CORNER.LB">
        <div class="text-white grid grid-cols-2">
          <div v-for="(attrVal,attr) in attrs" :key="attr"
               :class="attr === FOUR_CORNER_SHOW_NAME.SliceThickness ? 'col-span-2': ''">
              <span v-if="DONT_SHOW_ATTR.includes(attr)">
                {{ fourCornerVal[attr] }}
              </span>
            <span v-else-if="fourCornerVal[attr]">
                {{ Map_Show_Name[attr] }}: {{ fourCornerVal[attr] }}
              </span>
          </div>
        </div>
      </template>
      <template v-else-if="position === FOUR_CORNER.RB">
        <div class="text-white flex justify-around">
          <div v-for="(attrVal,attr) in attrs" :key="attr">
            <div>
              <p v-if="attr in DONT_SHOW_ATTR" class="whitespace-nowrap">
                {{ fourCornerVal[attr] }}
              </p>
              <p v-else-if="fourCornerVal[attr]" class="whitespace-nowrap">
                {{ Map_Show_Name[attr] }}: {{ fourCornerVal[attr] }}
              </p>
            </div>
          </div>
        </div>
      </template>
      <template v-else-if="position === FOUR_CORNER.RT">
        <div v-for="(attrVal,attr) in attrs" :key="attr" class="text-white">
          <p v-if="attr === FOUR_CORNER_SHOW_NAME.INDEX" class="text-right">
            {{ attr }}: {{ fourCornerVal[FOUR_CORNER_SHOW_NAME.INDEX] }} / {{
              fourCornerVal[FOUR_CORNER_SHOW_NAME.TOTAL]
            }}
          </p>
          <p v-else-if="DONT_SHOW_ATTR.includes(attr)" class="text-right">
            {{ fourCornerVal[attr] }}
          </p>
          <p v-else-if="fourCornerVal[attr]" class="text-right">
            {{ Map_Show_Name[attr] }}: {{ fourCornerVal[attr] }}
          </p>
        </div>
      </template>

      <template v-else>
        <div v-for="(attrVal,attr) in attrs" :key="attr" class="text-white">
          <p v-if="attr === FOUR_CORNER_SHOW_NAME.INDEX">
            {{ attr }}: {{ fourCornerVal[FOUR_CORNER_SHOW_NAME.INDEX]  + 1 }} / {{
              fourCornerVal[FOUR_CORNER_SHOW_NAME.TOTAL]
            }}
          </p>
          <p v-else-if="DONT_SHOW_ATTR.includes(attr)">
            {{ fourCornerVal[attr] }}
          </p>
          <p v-else>
            {{ Map_Show_Name[attr] }}: {{ fourCornerVal[attr] }}
          </p>
        </div>
      </template>

    </div>
  </div>
</template>

<style scoped>
.lt {
  @apply col-span-1 row-span-1
}

.rt {
  @apply col-span-1 row-span-1 col-start-3 justify-self-end
}

.lb {
  @apply col-span-1 row-span-1 col-start-1 row-start-3 self-end justify-self-start
}

.rb {
  @apply col-span-1 row-span-1 col-start-3 row-start-3 self-end justify-self-end
}
</style>
